<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图落差</title>
    <style>
        .container {
            margin: 0 400px;
        }

        .wrap {
            height: 200px;
            overflow-y: scroll;
            background-image: url("./img/timg.jpeg");
            background-size: cover;
        }

        p {
            text-align: center;
        }

        .w-scrol {
            background-attachment: scroll;
        }

        .w-local {
            background-attachment: local;
        }

        .w-fixed {
            background-attachment: fixed;
        }

    </style>
</head>
<body>

<div class="container">
    <div class="box">
        <h3>
            background-attachment: scroll -->表示背景相对于元素本身固定， 而不是随着它的内容滚动。
        </h3>
        <div class="wrap w-scroll">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
        </div>
        <h3>
            background-attachment: local -->表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，
            并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
        </h3>
        <div class="wrap w-local">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
        </div>
        <h3>
            background-attachment: fixed -->表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
            注意一下 scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。
        </h3>
        <div class="wrap w-fixed">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
        </div>
    </div>
</div>


</body>
</html>
